<template>
  <div>
    <el-menu class="el-menu-vertical-demo" :router="true">
      <el-menu-item index="benzhou" class="col">
        <span slot="title">本周热推</span>
      </el-menu-item>
      <el-menu-item index="lishi">
        <span slot="title">仙侠精选</span>
      </el-menu-item>
      <el-menu-item index="junshi">
        <span slot="title">都市精选</span>
      </el-menu-item>
      <el-menu-item index="nvsheng">
        <span slot="title">职场精选</span>
      </el-menu-item>
      <el-menu-item index="nanpin">
        <span slot="title">男频新书</span>
      </el-menu-item>
      <el-menu-item index="nvpin">
        <span slot="title">科幻新书</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 300px;
  min-height: 400px;
  background: white;
}
.el-menu-item {
  font-size: 18px;
  background: white;
  border-top: 1px solid #ccc;
  font-weight: 600;
}
.el-menu-item:hover {
  color: white;
  background: black;
}
.el-menu {
  border: none;
}
</style>
<script>
</script>